<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Project Rain</title>

    <style>
        /* 设置页面背景 */
        body {
            position: relative;
            background-color: #ffb3ba;
            background-image: url('door.jpg');
            background-size: cover;
            background-blur: 10px;
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            backdrop-filter: blur(10px) brightness(90%);
        }

        /* 隐藏列表的边框线 */
        .list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* 设置列表项样式 */
        .list li {
            margin: 10px;
            padding: 10px;
            border-bottom: 1px solid #eee;
            background-color: rgba(255, 255, 255, 0.5);
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            opacity: 0;
            animation: fadeIn 1s ease forwards;
        }

        .list li:last-child {
            border-bottom: none;
        }

        .list li .raspi {
            font-weight: bold;
            margin-right: 10px;
        }


        /* 设置列表项的特效 */
        .list li:nth-child(odd) {
            transform: translateX(-50px);
            animation: slideInLeft 1s ease forwards;
        }

        .list li:nth-child(even) {
            transform: translateX(50px);
            animation: slideInRight 1s ease forwards;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes slideInLeft {
            from {
                transform: translateX(-50px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideInRight {
            from {
                transform: translateX(50px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h3>Project Rain for RaspberryPi 4B Clients Data Monitor</h3>
    <div>
        <!-- 开启定时器-->
        <button type="button" class="list_controller" id="enableAutoUpdate" onclick="enableAutoUpdate()">
            enableAutoUpdate
        </button>
        <!--关闭定时器-->
        <button type="button" class="list_controller" id="disableAutoUpdate" onclick="disableAutoUpdate()">
            disableAutoUpdate
        </button>
        <!--手动取一次数据-->
        <button type="button" class="list_controller" id="updateOnce" onclick="fetchOnce()">
            fetchOnce
        </button>
        <!--清屏-->
        <button type="button" class="list_controller" id="clearScreen" onclick="clearScreen()">
            ClearScreen
        </button>
    </div>

    <ul class="list" id="list">
        <li>
            <span class="raspi">Initial List</span>
        </li>
    </ul>
</div>
<script>

    class ClientData {
        timeStamp;
        clientID;
        cpuTemp;
        distance;
        envTemp;
        envHumi;
    }

    /**
     * @param {ClientData[]} data - 客户端数据对象数组 */
    function updateList(data /**  ClientData[] */) {
        const list = document.getElementById("list");
        // Remove any excess list items
        while (list.children.length > data.length + 1) {
            list.removeChild(list.lastChild);
        }

        // Update existing list items and add new ones
        for (let i = 0; i < data.length; i++) {
            let item = list.children[i + 1];
            if (!item) {
                item = document.createElement("li");
                list.appendChild(item);
            }
            item.innerHTML = "<span class=\"raspi\">[ " + data[i].timeStamp + " ] ID: "
                + data[i].clientID + ", cpuTemp: " + data[i].cpuTemp + ", distance: "
                + data[i].distance + ", encTemp: " + data[i].envTemp + ", envHumi: "
                + data[i].envHumi + "</span>";
        }
        if (list.children.length <= 1)
            list.children[0].innerHTML = "<span class=\"raspi\">There Is No Client Connection</span>";
        else list.children[0].innerHTML = "<span class=\"raspi\">Client Connection List:</span>";
    }

    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            const data = JSON.parse(this.responseText);
            if (Array.isArray(data) && data.every(item => item instanceof ClientData))
                updateList(data);
            else console.log("Unknown JSON formation: " + this.responseText);
        }
    };

    let auto_update_date = setInterval(queryData, 10000);

    function enableAutoUpdate() {
        auto_update_date = setInterval(queryData, 10000);
    }

    function disableAutoUpdate() {
        clearInterval(auto_update_date);
    }

    function fetchOnce() {
        clearInterval(auto_update_date);
        queryData();
    }

    function clearScreen() {
        updateList([]);
    }

    function queryData() {
        xhr.open("GET", "/fetch_all_data", true);
        xhr.send();
    }


</script>


</body>
</html>

